<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0,viewport-fit=cover" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../css/vant.css">
    <link rel="stylesheet" type="text/css" href="../css/base.css" />
    <link rel="stylesheet" type="text/css" href="../css/local.css" />
    <script type="text/javascript" src="../script/jquery.js"></script>
    <script type="text/javascript" src="../script/layer/mobile/layer.js"></script>
    <script type="text/javascript" src="../script/vue.min.js"></script>
    <script type="text/javascript" src="../script/vant.min.js"></script>
    <script type="text/javascript" src="../script/fastclick.js"></script>
    <script type="text/javascript" src="../script/base.js"></script>
    <script type="text/javascript" src="../script/scanTransf.js"></script>
    <script type="text/javascript" src="../script/moment.js"></script>
    <style type="text/css">
        #app {
            width: 100%;
            height: 100%;
            position: relative;
        }

        .scanBtn {
            width: 200px;
            height: 200px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            position: absolute;
            background-color: #0396FF;
            border-radius: 50%;
        }

        .scan {
            color: #fff;
            text-align: center;
            font-size: 35px;
            font-weight: bold;
        }

        .popup {
            width: 90%;
            height: 70%;
        }

        .container {
            width: 100%;
            height: 100%;
            margin: auto;
        }

        .form-label {
            color: #808991;
            font-size: 13px;
            user-select: none;
        }

        .pictitle {
            font-size: 14px;
            color: #646566;
            width: 6em;
        }

        .piccontent {
            width: 70%;
            margin: -20px auto auto 80px;
            overflow: hidden;
        }

        .van-uploader__preview {
            margin-left: 5px;
        }

        .van-uploader__upload {
            margin-left: 5px;
        }

        .savebtn {
            width: 40%;
            font-weight: bold;
            margin-bottom: 20px;
            top: 50px;
            left: 30%;
            transform: translate(0%, -50%);
            line-height: 80px;
            /* margin-top: 0px; */
        }
    </style>
</head>

<body>
    <div id="app">
        <van-nav-bar-main title="试制单扫描" left-arrow @click-left="onClickLeft">
        </van-nav-bar-main>
        <div class="scanBtn" @click.stop="openScan" is-link>
            <p class="scan">扫描</p>
            <p class="scan">二维码</p>
        </div>
        <van-popup v-model="show" class="popup">
            <div class="container">
                <van-cell-group>
                    <van-field v-model="BillNo" label="单据编号：" placeholder="请输入单据编号：" readonly></van-field>
                    <van-field v-model="ApplyDate" label="申请日期：" placeholder="请输入申请日期：" readonly></van-field>
                    <van-field v-model="EmplName" label="申请人：" placeholder="请输入申请人：" readonly></van-field>
                    <van-field v-model="ProductName" label="产品名称：" placeholder="请输入产品名称：" readonly></van-field>
                    <van-field required v-model="process" label="工序：" placeholder="请选择工序：" readonly right-icon="arrow"
                        @click="handelShowProcess"></van-field>
                    <van-field v-model="begintime" is-link readonly label="开始时间：" placeholder="请选择开始时间："
                        @click="showbegin = true">
                    </van-field>
                    <van-field v-model="endtime" is-link readonly label="结束时间：" placeholder="请选择结束时间："
                        @click="showend = true">
                    </van-field>
                    </van-field>
                    <van-cell class="photo">
                        <div class="pictitle">工艺图片:</div>
                        <div class="piccontent">
                            <div class="van-uploader">
                                <div class="van-uploader__wrapper">
                                    <!-- 图片 -->
                                    <div class="van-uploader__preview" v-for="(imgItem,imgItemIndex) in image1">
                                        <div class="van-image van-uploader__preview-image"
                                            style="overflow: hidden; border-radius: 4px;"
                                            @click="previewImage(imgItemIndex, 1)">
                                            <img :src="serverIP + imgItem" class="van-image__img"
                                                style="object-fit: cover;" />
                                        </div>
                                        <div class="van-uploader__preview-delete" @click="deleteImgItem(imgItemIndex)"
                                            v-if="status!=1">
                                            <i class="van-icon van-icon-cross van-uploader__preview-delete-icon"></i>
                                        </div>
                                    </div>
                                    <!-- 添加图片 -->
                                    <div class="van-uploader__upload" v-if="image1.length < 15"
                                        @click="addImage(image1.length)">
                                        <i class="van-icon van-icon-plus van-uploader__upload-icon"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </van-cell>
                    <!-- <van-cell class="photo">
                       <div class="pictitle">问题点图片:</div>
                        <div class="piccontent">
                            <div class="van-uploader">
                                <div class="van-uploader__wrapper">
                                    图片
                                    <div class="van-uploader__preview" v-for="(imgItem,imgItemIndex) in image2">
                                        <div class="van-image van-uploader__preview-image"
                                            style="overflow: hidden; border-radius: 4px;"
                                            @click="previewImage1(imgItemIndex, 2)">
                                            <img :src="serverIP + imgItem" class="van-image__img"
                                                style="object-fit: cover;" />
                                        </div>
                                        <div class="van-uploader__preview-delete" @click="deleteImgItem1(imgItemIndex)"
                                            v-if="status!=1">
                                            <i class="van-icon van-icon-cross van-uploader__preview-delete-icon"></i>
                                        </div>
                                    </div>
                                    添加图片
                                    <div class="van-uploader__upload" v-if="image2.length < 15"
                                        @click="addImage1(image2.length)">
                                        <i class="van-icon van-icon-plus van-uploader__upload-icon"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </van-cell> -->
                    <van-field v-model="matter" rows="1" autosize label="问题：" type="textarea" placeholder="请输入问题：">
                    </van-field>
                    <van-field v-if="process == '电镀上挂'" v-model="FBCount" rows="1" autosize label="飞吧占用数：" type="textarea" placeholder="请输入飞吧占用数：">
                    </van-field>
                    <van-field v-if="process == '电镀上挂' || process == '喷漆新线' || process == '喷漆老线'  || process == '喷漆实验室'" v-model="SZCount" rows="1" autosize label="试制数量：" type="textarea" placeholder="请输入试制数量：">
                    </van-field>
                    <van-field v-model="fremarks" rows="1" autosize label="备注：" type="textarea" placeholder="请输入备注">
                </van-cell-group>
                <van-button round class="savebtn" type="info" native-type="submit" @click="saveBtn">保存
                </van-button>
            </div>
        </van-popup>
        <van-action-sheet v-model="showProcess" :actions="procedureActions" cancel-text="取消" description="请选择工序"
            close-on-click-action @select="confirmProcedureAction">
        </van-action-sheet>
        <van-popup v-model="showbegin" round position="bottom">
            <van-datetime-picker v-model="currentBeginDate" type="datetime" title="选择开始时间" :min-date="minDate"
                :max-date="maxDate" @confirm="confirmBegintime" @cancel="cancelBegintime" />
        </van-popup>
        <van-popup v-model="showend" round position="bottom">
            <van-datetime-picker v-model="currentEndDate" type="datetime" title="选择结束时间" :min-date="minDate"
                :max-date="maxDate" @confirm="confirmEndtime" @cancel="cancelEndtime" />
        </van-popup>
    </div>
</body>

<script type="text/javascript">
    var vm;
    apiready = function () {
        var photoBrowser = api.require('photoBrowser');
        var UIAlbumBrowser = api.require('UIAlbumBrowser');
        var FNScanner = api.require('FNScanner');
        var isOpenImg = false;

        api.addEventListener({
            name: 'keyback'
        }, function (ret, err) {
            if (!isOpenImg) {
                vm.onClickLeft();
            } else {
                photoBrowser.close();
            }

        });

        vm = new Vue({
            el: '#app',
            data: {
                SZCount: '',
                FBCount: '',
                matter: '',
                status: api.pageParam.status,
                image1: [],
                serverIP: 'http://' + APP.serverIP(),
                showend: false,
                showbegin: false,
                minDate: new Date(2020, 0, 1),
                maxDate: new Date(2025, 10, 1),
                currentBeginDate: new Date(),
                currentEndDate: new Date(),
                showProcess: false,
                show: false,
                process: '',
                TrialID: 0,
                BillNo: 0,
                ApplyDate: '',
                EmplName: '',
                ProductName: '',
                begintime: '',
                endtime: ' ',
                fremarks: '',
                procedureActions: [],
            },
            watch: {
            },
            methods: {
                handelShowProcess() {
                    var that = this
                    that.showProcess = true
                    that.getProcedureActions()
                },
                getProcedureActions() {
                    var that = this
                    // console.log(JSON.stringify(that.TrialID))
                    APP.ajax('getSZProcess', { TrialID: that.TrialID }, function (res) {
                        // console.log(JSON.stringify(res))
                        var newProcedureActions = res.ds
                        newProcedureActions.forEach((i) => {
                            i['name'] = i.gx,
                                delete i.gx
                        })
                        // console.log(JSON.stringify(newProcedureActions))
                        that.procedureActions = newProcedureActions
                        // console.log(JSON.stringify( that.procedureActions))
                    })
                },
                confirmBegintime() {
                    var that = this
                    that.begintime = this.currentBeginDate.getFullYear() + "-" + (Number(this.currentBeginDate.getMonth()) + 1) + "-" + this.currentBeginDate.getDate() + " " + this.currentBeginDate.getHours() + ":" + this.currentBeginDate.getMinutes() + ":00";
                    that.showbegin = false;
                },
                cancelBegintime() {
                    var that = this;
                    that.showbegin = false;
                },
                confirmEndtime() {
                    var that = this;
                    that.endtime = this.currentEndDate.getFullYear() + "-" + (Number(this.currentEndDate.getMonth()) + 1) + "-" + this.currentEndDate.getDate() + " " + this.currentEndDate.getHours() + ":" + this.currentEndDate.getMinutes() + ":00";
                    that.showend = false;
                },
                cancelEndtime() {
                    var that = this;
                    that.showend = false;
                },
                confirmProcedureAction: function (action, index) {
                    var that = this;
                    that.process = action.name;
                    APP.ajax('get_SZDList', { TrialID: vm.TrialID, process: vm.process }, function (res) {
                        if (res.ds.length) {
                            // alert(JSON.stringify(res.ds))
                            vm.BillNo = res.ds[0].BillNo
                            vm.ApplyDate = res.ds[0].ApplyDate.split("T")[0];
                            vm.EmplName = res.ds[0].EmplName
                            vm.ProductName = res.ds[0].ProductName
                            vm.begintime = res.ds[0].begintime
                            vm.endtime = res.ds[0].endtime
                            vm.process = res.ds[0].process
                            vm.fremarks = res.ds[0].FRemarks
                            vm.matter = res.ds[0].filepath
                            vm.FBCount = res.ds[0].FBCount
                            vm.SZCount = res.ds[0].SZCount
                            if (res.ds[0].gongyipath) {
                                // console.log(JSON.stringify(vm.image1))
                                vm.image1 = res.ds[0].gongyipath.split(',')
                                // console.log(JSON.stringify(vm.image1))
                            }else{
                                vm.image1=[];
                            }
                        }
                    })
                },
                onClickLeft: function () {
                    api.sendEvent({
                        name: 'refreshList'
                    })
                    api.closeWin();
                },
                openScan() {
                    FNScanner.open({
                        autorotation: true
                    }, function (ret, err) {
                        // alert(ret.eventType)
                        if (ret) {
                            // console.log(JSON.stringify(ret))
                            // console.log(ret.eventType == 'success')
                            if (ret.eventType == 'success') {
                                if (ret.content) {
                                    // alert(ret.content)
                                    var res = ret.content
                                    var result = res.indexOf('|');
                                    vm.TrialID = res.substring(result + 1, res.length);
                                    // console.log(JSON.stringify(vm.TrialID))
                                    // console.log(JSON.stringify(vm.process))
                                    APP.ajax('get_SZDList', { TrialID: vm.TrialID, process: vm.process }, function (res) {
                                        if (res.ds.length) {
                                            // console.log(JSON.stringify(res.ds))
                                            vm.BillNo = res.ds[0].BillNo
                                            vm.ApplyDate = res.ds[0].ApplyDate.split("T")[0];
                                            vm.EmplName = res.ds[0].EmplName
                                            vm.ProductName = res.ds[0].ProductName
                                            vm.begintime = res.ds[0].begintime
                                            vm.endtime = res.ds[0].endtime
                                            // vm.process = res.ds[0].process
                                            vm.fremarks = res.ds[0].FRemarks
                                            vm.matter = res.ds[0].filepath
                                            vm.FBCount = res.ds[0].FBCount
                                            vm.SZCount = res.ds[0].SZCount
                                            if (res.ds[0].gongyipath) {
                                                vm.image1 = res.ds[0].gongyipath.split(',')
                                            }
                                        }
                                    })
                                }
                            } else {
                                layer.open({
                                    content: '图片模糊，建议截屏!',
                                    skin: 'msg',
                                    time: 2
                                })
                            }
                        } else {
                            layer.open({
                                content: '扫描失败!',
                                skin: 'msg',
                                time: 2
                            })
                        }
                    });
                    this.show = true;
                },
                saveBtn() {
                    var that = this;
                    if(vm.process) {
                        obj = {
                            TrialID: vm.TrialID,
                            process: vm.process,
                            fremarks: vm.fremarks || '',
                            begintime: vm.begintime,
                            endtime: vm.endtime,
                            FBCount: vm.FBCount || 0,
                            SZCount: vm.SZCount || 0
                        }
                        console.log(JSON.stringify(obj));
                        APP.ajax('update_SZDList', obj, function (res) {
                            // console.log(JSON.stringify(res))
                            that.getSZDList();
                        })
                        that.updateImage();
                    }else {
                        layer.open({
                            content: '工序不能为空!',
                            skin: 'msg',
                            time: 2
                        })
                    }
                    
                },
                updateImage() {
                    // console.log(JSON.stringify(vm.TrialID))
                    // console.log(JSON.stringify(vm.process))
                    // console.log(JSON.stringify(vm.image1))
                    // console.log(JSON.stringify(vm.matter))
                    var newImage1 = vm.image1.join(',')
                    APP.ajax('updateSZImage', { TrialID: vm.TrialID, process: vm.process, image1: newImage1, image2: vm.matter }, function (res) {
                        // console.log(JSON.stringify(res))
                    })
                },
                async getSZDList() {
                    APP.ajax('get_SZDList', { TrialID: vm.TrialID, process: vm.process }, function (res) {
                        if (res.ds.length) {
                            // alert(JSON.stringify(res.ds))
                            vm.BillNo = res.ds[0].BillNo
                            vm.ApplyDate = res.ds[0].ApplyDate.split("T")[0];
                            vm.EmplName = res.ds[0].EmplName
                            vm.ProductName = res.ds[0].ProductName
                            vm.begintime = res.ds[0].begintime
                            vm.endtime = res.ds[0].endtime
                            vm.process = res.ds[0].process
                            vm.fremarks = res.ds[0].FRemarks
                            vm.matter = res.ds[0].filepath
                            vm.FBCount = res.ds[0].FBCount
                            vm.SZCount = res.ds[0].SZCount
                            if (res.ds[0].gongyipath) {
                                vm.image1 = res.ds[0].gongyipath.split(',')
                            }
                        }
                    })
                },
                previewImage: function (index, type) {
                    var that = this;
                    var array = JSON.parse(JSON.stringify(that.image1));
                    // alert(array)
                    for (var i in array) {
                        array[i] = that.serverIP + array[i];
                    }
                    photoBrowser.open({
                        images: array,
                        activeIndex: index,
                        bgColor: '#000'
                    }, function (ret) {
                        isOpenImg = true;
                        if (ret) {
                            if (ret.eventType == 'click') {
                                isOpenImg = false;
                                photoBrowser.close();
                            }
                        }
                    })
                },
                deleteImgItem: function (index) {
                    var that = this;
                    that.image1.splice(index, 1)
                },
                addImage: function (len) {
                    var that = this;
                    UIAlbumBrowser.imagePicker({
                        max: 9 - len,
                        styles: {
                            nav: {
                                bg: 'rgba(0,0,0,.6)',
                                finishText: '完成'
                            }
                        },
                        rotation: true
                    }, function (ret) {
                        if (ret) {
                            if (ret.originalPath) {
                                UIAlbumBrowser.transPath({
                                    path: ret.assetPath || ret.originalPath
                                }, function (ret, err) {
                                    if (ret) {
                                        APP.uploadFile('工艺图片', ret.path, function (path) {
                                            that.image1.push(path);
                                        })

                                    }
                                });
                            } else if (ret.eventType == 'nextStep') {
                                UIAlbumBrowser.closePicker();
                                var imgLists = ret.list;
                                var repeatImg = function (i) {
                                    if (i == imgLists.length) {
                                        return;
                                    }
                                    UIAlbumBrowser.transPath({
                                        path: imgLists[i].path
                                    }, function (ret, err) {
                                        if (ret) {
                                            APP.uploadFile('工艺图片', ret.path, function (path) {
                                                that.image1.push(path);
                                            })
                                            i++;
                                            repeatImg(i);
                                        }
                                    });
                                }
                                repeatImg(0)

                            }
                        }
                    });
                },
            }
        })
    }
</script>

</html>